<script lang="ts" setup>
import type { PropType } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
});
const formRef = ref();

const form = ref({
  indicatorName: '',
  score: '',
  assessmentMethod: '',
  provider: '',
  // id: 0,
});

const rules: any = {
  indicatorName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
  score: [{ required: true, message: '请输入分值', trigger: 'blur' }],
  assessmentMethod: [
    { required: true, message: '请输入县体考核办法', trigger: 'blur' },
  ],
  provider: [{ required: true, message: '请输入提供人', trigger: 'blur' }],
  id: [{ required: true, message: '请输入id', trigger: 'blur' }],
};

function resetForm() {
  formRef.value.resetFields();
}

function onClose() {
  props.getVisible();
}

async function onSubmit() {
  await formRef.value.validate();
  const countyItem = {
    indicatorName: form.value.indicatorName,
    score: form.value.score,
    assessmentMethod: form.value.assessmentMethod,
    provider: form.value.provider,
    // id: form.value.id,
  };
  await addcount(countyItem).then(() => {
    props.getVisible();
  });
}
</script>

<template>
  <div>
    <a-drawer
      title="新增县分指标记录" :width="720" :open="props.visible" :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <!-- <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="id" name="id" prop="id">
              <a-input v-model:value="form.id" placeholder="请输入id" />
            </a-form-item>
          </a-col>
        </a-row> -->
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="指标名称" name="indicatorName" prop="indicatorName">
              <a-input v-model:value="form.indicatorName" placeholder="请输入指标名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="分值" name="score" prop="score">
              <a-input v-model:value="form.score" placeholder="请输入分值" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="县体考核办法" name="assessmentMethod" prop="assessmentMethod">
              <a-input v-model:value="form.assessmentMethod" style="width: 100%;" placeholder="请输入县体考核办法" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="提供人" name="provider" prop="provider">
              <a-input v-model:value="form.provider" style="width: 100%;" placeholder="请输入提供人" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px;" @click="onClose">
          取消
        </a-button>
        <a-button style="margin-right: 8px;" @click="resetForm">
          重置
        </a-button>
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
